import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard }  from './auth/auth.guard';

import {LayoutComponent} from './layout/layout.component'
import {ContactListComponent} from './contact-list/contact-list.component'
import {ContactNewComponent} from './contact-new/contact-new.component'
import {ContactEditComponent} from './contact-edit/contact-edit.component'

import {TagListComponent} from './tag-list/tag-list.component'
import {TagNewComponent} from './tag-new/tag-new.component'
import {TagEditComponent} from './tag-edit/tag-edit.component'
// 路由模块添加
import {SigninComponent} from './signin/signin.component'
import {SignupComponent} from './signup/signup.component'

// 配置路由表
const routes: Routes = [
  {// 这是首页路由 默认跳转到contacts
    path: '',
    redirectTo: '/contacts',
    pathMatch: 'full' // 必须是完全匹配，才能跳转
  },
  {
    // 在模板路由中配置子路由
    // 当我们访问 contacts 会把LayoutComponent 组件先渲染，然后在渲染children中的子组件
    path: 'contacts',
    component: LayoutComponent,
    canActivate: [AuthGuard], // 在导航，会先进入路由守卫
    children: [
      {
        path:'',
        component: ContactListComponent
      },
      {
        path: 'new', // 这里的new 的请求是 /contacts/new
        component: ContactNewComponent
      },
      {
        path: 'edit/:id',
        component: ContactEditComponent
      }
    ]
  },
  {
    // 在模板路由中配置子路由
    // 当我们访问 contacts 会把LayoutComponent 组件先渲染，然后在渲染children中的子组件
    path: 'tags',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path:'',
        component: TagListComponent
      },
      {
        path: 'new', // 这里的new 的请求是 /tags/new
        component: TagNewComponent
      },
      {
        path: 'edit',
        component: TagEditComponent
      }
    ]
  },
  {
    path: 'signin',
    component: SigninComponent
  },
  {
    path: 'signup',
    component: SignupComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
